<template>
    <div class="form-editor">
        <!-- 顶部操作栏 -->
        <div class="editor-header">
            <div class="header-left">
                <el-button icon="ArrowLeft" text></el-button>
                <el-button icon="House" text></el-button>
                <el-button icon="Plus" text></el-button>
                <span class="form-title">{{ form.title }}</span>
            </div>
            <div class="header-right">
                <el-button size="small" plain>表单设置</el-button>
                <el-button size="small" plain>预览</el-button>
                <el-button size="small" type="primary">保存</el-button>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="editor-content">
            <!-- 左侧题型面板 -->
            <div class="question-types-panel">
                <!-- 标题 -->
                <div class="panel-section">
                    <div class="section-title">
                        <span>自定义常用题</span>
                        <el-tooltip content="需要先添加常用题" placement="top">
                            <el-icon>
                                <InfoFilled />
                            </el-icon>
                        </el-tooltip>
                    </div>
                    <div class="empty-tip">
                        <span>当前未设置常用题</span>
                        <el-button type="primary" size="small" plain>立即添加</el-button>
                    </div>
                </div>

                <!-- 题型列表 -->
                <div class="panel-section">
                    <div class="section-title">
                        <span>填写题型</span>
                    </div>
                    <div class="question-type-list">
                        <div class="question-type-item" v-for="type in questionTypes" :key="type.type" draggable="true"
                            @dragstart="onDragStart($event, type)">
                            <div class="type-icon">
                                <el-icon>
                                    <component :is="type.icon"></component>
                                </el-icon>
                            </div>
                            <div class="type-label">{{ type.label }}</div>
                        </div>
                    </div>
                </div>

                <!-- 模板题库 -->
                <div class="panel-section">
                    <div class="section-title">
                        <span>题型模板</span>
                    </div>
                    <div class="template-list">
                        <div class="template-item" v-for="template in templates" :key="template.type" draggable="true"
                            @dragstart="onDragStartTemplate($event, template)">
                            <el-icon>
                                <component :is="template.icon"></component>
                            </el-icon>
                            <span>{{ template.label }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间编辑区域 -->
            <div class="form-content-container" @dragover.prevent @drop="onDrop">
                <div class="form-content">
                    <!-- 问卷标题 -->
                    <div class="form-header">
                        <h1 class="form-title">{{ form.title }}</h1>
                        <p class="form-description">{{ form.description }}</p>
                    </div>

                    <!-- 题目列表 -->
                    <draggable v-model="form.questions" item-key="id" ghost-class="ghost" handle=".question-drag-handle"
                        animation="300" @end="onDragEnd">
                        <template #item="{ element, index }">
                            <div class="question-item" :class="{ 'active': currentEditingQuestionId === element.id }">
                                <div class="question-header">
                                    <div class="question-number">{{ index + 1 }}.</div>
                                    <div class="question-title">{{ element.title }}</div>
                                    <div class="question-required" v-if="element.required">*</div>
                                </div>

                                <div class="question-content">
                                    <!-- 单选题 -->
                                    <template v-if="element.type === 'single_choice'">
                                        <div class="options-list">
                                            <div class="option-item" v-for="option in element.settings.options"
                                                :key="option.id">
                                                <el-radio :label="option.id" disabled>{{ option.text }}</el-radio>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 多选题 -->
                                    <template v-else-if="element.type === 'multiple_choice'">
                                        <div class="options-list">
                                            <div class="option-item" v-for="option in element.settings.options"
                                                :key="option.id">
                                                <el-checkbox :label="option.id" disabled>{{ option.text }}</el-checkbox>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 输入框 -->
                                    <template v-else-if="element.type === 'text_input'">
                                        <el-input :placeholder="element.settings.placeholder || '请输入'" disabled />
                                    </template>

                                    <!-- 矩阵题 -->
                                    <template v-else-if="element.type === 'matrix'">
                                        <div class="matrix-preview">
                                            <table class="matrix-table">
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th v-for="column in element.settings.columns" :key="column.id">
                                                            {{ column.text }}
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="row in element.settings.rows" :key="row.id">
                                                        <td class="row-title">{{ row.text }}</td>
                                                        <td v-for="column in element.settings.columns" :key="column.id">
                                                            <el-radio v-if="element.settings.cellType === 'radio'"
                                                                      :label="column.id"
                                                                      disabled />
                                                            <el-checkbox v-else-if="element.settings.cellType === 'checkbox'"
                                                                      :label="column.id"
                                                                      disabled />
                                                            <el-input v-else-if="element.settings.cellType === 'text'"
                                                                     disabled
                                                                     size="small" />
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </template>
                                </div>

                                <div class="question-actions">
                                    <el-button-group>
                                        <el-button icon="EditPen" size="small"
                                            @click="editQuestion(element)"></el-button>
                                        <el-button icon="CopyDocument" size="small"></el-button>
                                        <el-button icon="Delete" size="small"
                                            @click="deleteQuestion(index)"></el-button>
                                        <el-button class="question-drag-handle" icon="Rank" size="small"></el-button>
                                    </el-button-group>
                                </div>
                            </div>
                        </template>
                    </draggable>

                    <!-- 空状态提示 -->
                    <div class="empty-form-tip" v-if="form.questions.length === 0">
                        <el-empty description="拖拽左侧题型到此处开始创建表单"></el-empty>
                    </div>
                </div>
            </div>

            <!-- 右侧属性面板 -->
            <div class="property-panel">
                <div class="panel-header">
                    <span>{{ editingQuestion ? '题目设置' : '表单设置' }}</span>
                </div>
                <div class="panel-content">
                    <!-- 题目设置 -->
                    <template v-if="editingQuestion">
                        <el-form label-position="top">
                            <el-form-item label="标题">
                                <el-input v-model="editingQuestion.title" placeholder="请输入题目标题"></el-input>
                            </el-form-item>
                            <el-form-item label="必填">
                                <el-switch v-model="editingQuestion.required"></el-switch>
                            </el-form-item>

                            <!-- 单选/多选特有设置 -->
                            <template v-if="['single_choice', 'multiple_choice'].includes(editingQuestion.type)">
                                <el-form-item label="选项">
                                    <div v-for="(option, optionIndex) in editingQuestion.settings.options"
                                        :key="option.id" class="option-edit-item">
                                        <el-input v-model="option.text" placeholder="选项文本">
                                            <template #prefix>
                                                <el-icon v-if="editingQuestion.type === 'single_choice'">
                                                    <CircleCheck />
                                                </el-icon>
                                                <el-icon v-else>
                                                    <Check />
                                                </el-icon>
                                            </template>
                                            <template #suffix>
                                                <el-button icon="Delete" text
                                                    @click="removeOption(optionIndex)"></el-button>
                                            </template>
                                        </el-input>
                                    </div>
                                    <el-button type="dashed" block @click="addOption">添加选项</el-button>
                                </el-form-item>
                            </template>

                            <!-- 文本输入特有设置 -->
                            <template v-if="editingQuestion.type === 'text_input'">
                                <el-form-item label="提示文本">
                                    <el-input v-model="editingQuestion.settings.placeholder"
                                        placeholder="请输入提示文本"></el-input>
                                </el-form-item>
                                <el-form-item label="输入类型">
                                    <el-select v-model="editingQuestion.settings.inputType" placeholder="请选择">
                                        <el-option label="单行文本" value="text"></el-option>
                                        <el-option label="多行文本" value="textarea"></el-option>
                                        <el-option label="数字" value="number"></el-option>
                                        <el-option label="邮箱" value="email"></el-option>
                                        <el-option label="电话" value="phone"></el-option>
                                    </el-select>
                                </el-form-item>
                            </template>

                            <!-- 矩阵题特有设置 -->
                            <template v-if="editingQuestion.type === 'matrix'">
                                <el-form-item label="矩阵类型">
                                    <el-select v-model="editingQuestion.settings.cellType" placeholder="请选择">
                                        <el-option label="单选钮" value="radio"></el-option>
                                        <el-option label="复选框" value="checkbox"></el-option>
                                        <el-option label="文本输入" value="text"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="标签对齐">
                                    <el-select v-model="editingQuestion.settings.labelAlign" placeholder="请选择">
                                        <el-option label="左对齐" value="left"></el-option>
                                        <el-option label="居中" value="center"></el-option>
                                        <el-option label="右对齐" value="right"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="随机排序行">
                                    <el-switch v-model="editingQuestion.settings.randomizeRows"></el-switch>
                                </el-form-item>

                                <!-- 行管理 -->
                                <el-form-item label="行项目">
                                    <div v-for="(row, rowIndex) in editingQuestion.settings.rows"
                                        :key="row.id" class="option-edit-item">
                                        <el-input v-model="row.text" placeholder="行标题">
                                            <template #prefix>
                                                <el-icon><Minus /></el-icon>
                                            </template>
                                            <template #suffix>
                                                <el-button icon="Delete" text
                                                    @click="removeMatrixRow(rowIndex)"></el-button>
                                            </template>
                                        </el-input>
                                    </div>
                                    <el-button type="dashed" block @click="addMatrixRow">添加行项目</el-button>
                                </el-form-item>

                                <!-- 列管理 -->
                                <el-form-item label="列选项">
                                    <div v-for="(column, columnIndex) in editingQuestion.settings.columns"
                                        :key="column.id" class="option-edit-item">
                                        <el-input v-model="column.text" placeholder="列标题">
                                            <template #prefix>
                                                <el-icon><Plus /></el-icon>
                                            </template>
                                            <template #suffix>
                                                <el-button icon="Delete" text
                                                    @click="removeMatrixColumn(columnIndex)"></el-button>
                                            </template>
                                        </el-input>
                                    </div>
                                    <el-button type="dashed" block @click="addMatrixColumn">添加列选项</el-button>
                                </el-form-item>
                            </template>
                        </el-form>
                    </template>

                    <!-- 表单设置 -->
                    <template v-else>
                        <el-form label-position="top">
                            <el-form-item label="表单标题">
                                <el-input v-model="form.title" placeholder="请输入表单标题"></el-input>
                            </el-form-item>
                            <el-form-item label="表单描述">
                                <el-input type="textarea" v-model="form.description" placeholder="请输入表单描述"></el-input>
                            </el-form-item>
                            <el-form-item label="主题色">
                                <el-color-picker v-model="form.settings.theme"></el-color-picker>
                            </el-form-item>
                            <el-form-item label="显示进度条">
                                <el-switch v-model="form.settings.showProgressBar"></el-switch>
                            </el-form-item>
                            <el-form-item label="需要登录">
                                <el-switch v-model="form.settings.requireLogin"></el-switch>
                            </el-form-item>
                        </el-form>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import draggable from 'vuedraggable'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'

// 当前编辑的题目ID
const currentEditingQuestionId = ref(null)

// 题目类型定义
const questionTypes = [
    { type: 'single_choice', label: '单选', icon: 'CircleCheck' },
    { type: 'multiple_choice', label: '多选', icon: 'Check' },
    { type: 'text_input', label: '填空', icon: 'ChatLineRound' },
    { type: 'date', label: '日期', icon: 'Calendar' },
    { type: 'time', label: '时间', icon: 'Clock' },
    { type: 'file_upload', label: '文件', icon: 'Upload' },
    { type: 'matrix', label: '矩阵题', icon: 'Grid' },
    { type: 'rating', label: '评分', icon: 'Star' },
    { type: 'page_break', label: '分页', icon: 'SwitchButton' },
]

// 题型模板
const templates = [
    { type: 'personal_info', label: '个人信息', icon: 'User' },
    { type: 'contact_info', label: '联系方式', icon: 'Phone' },
    { type: 'address', label: '地址', icon: 'Location' },
    { type: 'satisfaction', label: '满意度', icon: 'Star' },
]

// 表单数据
const form = reactive({
    id: 'form_' + uuidv4(),
    title: '客户满意度调查',
    description: '感谢您抽出宝贵时间参与我们的调查, 您的反馈对我们至关重要！',
    status: 'draft',
    settings: {
        theme: '#409EFF',
        showProgressBar: true,
        showPageNumber: true,
        requireLogin: false,
    },
    questions: [] // 初始为空数组, 让用户通过拖拽添加题目
})

// 当前编辑的题目
const editingQuestion = computed(() => {
    if (!currentEditingQuestionId.value) return null
    return form.questions.find(q => q.id === currentEditingQuestionId.value)
})

// 拖拽开始事件
const onDragStart = (event, type) => {
    event.dataTransfer.setData('questionType', type.type)
}

// 拖拽结束事件
const onDragEnd = () => {
    // 更新题目顺序
    form.questions.forEach((q, index) => {
        q.order = index + 1
    })
}

// 拖放事件 - 从题型面板拖到编辑区
const onDrop = (event) => {
    const questionType = event.dataTransfer.getData('questionType')
    const templateType = event.dataTransfer.getData('templateType')

    if (questionType) {
        // 创建新题目
        const newQuestion = createQuestion(questionType)
        form.questions.push(newQuestion)
        ElMessage.success('添加题目成功')

        // 自动选中新添加的题目进行编辑
        currentEditingQuestionId.value = newQuestion.id
    } else if (templateType) {
        // 处理模板拖放
        createQuestionsFromTemplate(templateType)
    }
}

// 拖拽开始事件 - 模板
const onDragStartTemplate = (event, template) => {
    event.dataTransfer.setData('templateType', template.type)
}

// 根据模板类型创建一组题目
const createQuestionsFromTemplate = (templateType) => {
    const questions = []

    switch (templateType) {
        case 'personal_info':
            // 个人信息模板
            questions.push(createQuestion('single_choice', '姓名', true))
            questions.push(createQuestion('text_input', '电话', true, { inputType: 'phone', placeholder: '请输入您的电话号码' }))
            questions.push(createQuestion('text_input', '邮箱', false, { inputType: 'email', placeholder: '请输入您的邮箱地址' }))
            break

        case 'contact_info':
            // 联系方式模板
            questions.push(createQuestion('text_input', '电话', true, { inputType: 'phone', placeholder: '请输入您的电话号码' }))
            questions.push(createQuestion('text_input', '邮箱', false, { inputType: 'email', placeholder: '请输入您的邮箱地址' }))
            questions.push(createQuestion('text_input', '微信号', false, { inputType: 'text', placeholder: '请输入您的微信号' }))
            break

        case 'address':
            // 地址模板
            questions.push(createQuestion('text_input', '省市区', true, { inputType: 'text', placeholder: '请选择或输入省市区' }))
            questions.push(createQuestion('text_input', '详细地址', true, { inputType: 'textarea', placeholder: '请输入详细地址信息' }))
            questions.push(createQuestion('text_input', '邮政编码', false, { inputType: 'text', placeholder: '请输入邮政编码' }))
            break

        case 'satisfaction':
            // 满意度模板
            questions.push(createQuestion('single_choice', '您对我们的产品满意度如何？', true,
                {
                    options: [
                        { id: 'opt_1', text: '不满意', order: 1 },
                        { id: 'opt_2', text: '一般', order: 2 },
                        { id: 'opt_3', text: '满意', order: 3 },
                        { id: 'opt_4', text: '非常满意', order: 4 }
                    ]
                }
            ))
            questions.push(createQuestion('single_choice', '您对我们的客服满意度如何？', true,
                {
                    options: [
                        { id: 'opt_5', text: '不满意', order: 1 },
                        { id: 'opt_6', text: '一般', order: 2 },
                        { id: 'opt_7', text: '满意', order: 3 },
                        { id: 'opt_8', text: '非常满意', order: 4 }
                    ]
                }
            ))
            questions.push(createQuestion('text_input', '您有什么建议或反馈？', false, { inputType: 'textarea', placeholder: '请输入您的建议或反馈' }))
            break
    }

    // 将创建的题目添加到表单中
    if (questions.length > 0) {
        form.questions.push(...questions)
        ElMessage.success(`添加${questions.length}个题目成功`)
    }
}

// 根据类型创建新题目（增强版, 支持标题和其他设置）
const createQuestion = (type, customTitle = null, isRequired = true, customSettings = null) => {
    const questionId = 'q_' + uuidv4()
    const baseQuestion = {
        id: questionId,
        type: type,
        title: customTitle || getDefaultTitleByType(type),
        description: '',
        required: isRequired,
        order: form.questions.length + 1,
    }

    // 根据类型设置默认值
    let settings = {}

    switch (type) {
        case 'single_choice':
            settings = {
                options: customSettings?.options || [
                    { id: `${questionId}_opt_1`, text: '选项一', order: 1 },
                    { id: `${questionId}_opt_2`, text: '选项二', order: 2 },
                ],
                displayType: 'radio',
                randomize: false,
            }
            break
        case 'multiple_choice':
            settings = {
                options: customSettings?.options || [
                    { id: `${questionId}_opt_1`, text: '选项一', order: 1 },
                    { id: `${questionId}_opt_2`, text: '选项二', order: 2 },
                ],
                displayType: 'checkbox',
                randomize: false,
            }
            break
        case 'text_input':
            settings = {
                inputType: customSettings?.inputType || 'text',
                placeholder: customSettings?.placeholder || '请输入',
                minLength: customSettings?.minLength || null,
                maxLength: customSettings?.maxLength || null,
            }
            break
        case 'matrix':
            settings = {
                rows: customSettings?.rows || [
                    { id: `${questionId}_row_1`, text: '行一', order: 1 },
                    { id: `${questionId}_row_2`, text: '行二', order: 2 },
                ],
                columns: customSettings?.columns || [
                    { id: `${questionId}_col_1`, text: '列一', order: 1 },
                    { id: `${questionId}_col_2`, text: '列二', order: 2 },
                    { id: `${questionId}_col_3`, text: '列三', order: 3 },
                ],
                cellType: customSettings?.cellType || 'radio',
                labelAlign: customSettings?.labelAlign || 'left',
                randomizeRows: customSettings?.randomizeRows || false,
            }
            break
    }

    // 合并自定义设置
    if (customSettings) {
        settings = { ...settings, ...customSettings }
    }

    return {
        ...baseQuestion,
        settings
    }
}

// 根据题目类型获取默认标题
const getDefaultTitleByType = (type) => {
    const titleMap = {
        'single_choice': '单选题',
        'multiple_choice': '多选题',
        'text_input': '填空题',
        'date': '日期',
        'time': '时间',
        'file_upload': '文件上传',
        'matrix': '矩阵题',
        'rating': '评分题',
        'page_break': '分页',
    }
    return titleMap[type] || '未命名题目'
}

// 编辑题目
const editQuestion = (question) => {
    currentEditingQuestionId.value = question.id
}

// 删除题目
const deleteQuestion = (index) => {
    if (form.questions[index].id === currentEditingQuestionId.value) {
        currentEditingQuestionId.value = null
    }
    form.questions.splice(index, 1)
    ElMessage.success('删除题目成功')
}

// 添加选项
const addOption = () => {
    if (!editingQuestion.value) return

    const questionId = editingQuestion.value.id
    const optionId = `${questionId}_opt_${editingQuestion.value.settings.options.length + 1}`

    editingQuestion.value.settings.options.push({
        id: optionId,
        text: `选项${editingQuestion.value.settings.options.length + 1}`,
        order: editingQuestion.value.settings.options.length + 1
    })
}

// 删除选项
const removeOption = (index) => {
    if (!editingQuestion.value) return
    if (editingQuestion.value.settings.options.length <= 1) {
        ElMessage.warning('至少保留一个选项')
        return
    }

    editingQuestion.value.settings.options.splice(index, 1)
    // 更新选项顺序
    editingQuestion.value.settings.options.forEach((opt, idx) => {
        opt.order = idx + 1
    })
}

// 添加矩阵行
const addMatrixRow = () => {
    if (!editingQuestion.value) return

    const questionId = editingQuestion.value.id
    const rowId = `${questionId}_row_${editingQuestion.value.settings.rows.length + 1}`

    editingQuestion.value.settings.rows.push({
        id: rowId,
        text: `行${editingQuestion.value.settings.rows.length + 1}`,
        order: editingQuestion.value.settings.rows.length + 1
    })
}

// 删除矩阵行
const removeMatrixRow = (index) => {
    if (!editingQuestion.value) return
    if (editingQuestion.value.settings.rows.length <= 1) {
        ElMessage.warning('至少保留一行')
        return
    }

    editingQuestion.value.settings.rows.splice(index, 1)
    // 更新行顺序
    editingQuestion.value.settings.rows.forEach((row, idx) => {
        row.order = idx + 1
    })
}

// 添加矩阵列
const addMatrixColumn = () => {
    if (!editingQuestion.value) return

    const questionId = editingQuestion.value.id
    const columnId = `${questionId}_col_${editingQuestion.value.settings.columns.length + 1}`

    editingQuestion.value.settings.columns.push({
        id: columnId,
        text: `列${editingQuestion.value.settings.columns.length + 1}`,
        order: editingQuestion.value.settings.columns.length + 1
    })
}

// 删除矩阵列
const removeMatrixColumn = (index) => {
    if (!editingQuestion.value) return
    if (editingQuestion.value.settings.columns.length <= 1) {
        ElMessage.warning('至少保留一列')
        return
    }

    editingQuestion.value.settings.columns.splice(index, 1)
    // 更新列顺序
    editingQuestion.value.settings.columns.forEach((column, idx) => {
        column.order = idx + 1
    })
}
</script>

<style scoped>
.form-editor {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 56px;
    border-bottom: 1px solid #e4e7ed;
    background-color: #fff;
}

.header-left {
    display: flex;
    align-items: center;
}

.form-title {
    margin-left: 16px;
    font-size: 16px;
    font-weight: 500;
}

.editor-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.question-types-panel {
    width: 240px;
    background-color: #fff;
    border-right: 1px solid #e4e7ed;
    padding: 16px;
    overflow-y: auto;
}

.panel-section {
    margin-bottom: 24px;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #606266;
    font-size: 14px;
}

.section-title .el-icon {
    margin-left: 4px;
    font-size: 16px;
    color: #909399;
}

.empty-tip {
    text-align: center;
    padding: 16px;
    color: #909399;
    font-size: 14px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-tip .el-button {
    margin-top: 8px;
}

.question-type-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.question-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: move;
    transition: all 0.3s;
}

.question-type-item:hover {
    border-color: #409eff;
    background-color: #ecf5ff;
}

.type-icon {
    font-size: 20px;
    margin-bottom: 4px;
    color: #409eff;
}

.type-label {
    font-size: 12px;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.template-item:hover {
    border-color: #409eff;
    background-color: #ecf5ff;
}

.template-item .el-icon {
    margin-right: 8px;
    color: #409eff;
}

.form-content-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.form-content {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 24px;
    min-height: calc(100vh - 120px);
}

.form-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
}

.form-title {
    font-size: 24px;
    margin-bottom: 8px;
}

.form-description {
    font-size: 14px;
    color: #606266;
}

.question-item {
    margin-bottom: 16px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 16px;
    position: relative;
    transition: all 0.3s;
}

.question-item.active {
    border-color: #409eff;
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
}

.question-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.question-number {
    font-weight: bold;
    margin-right: 8px;
}

.question-title {
    font-weight: bold;
    flex: 1;
}

.question-required {
    color: #f56c6c;
    margin-left: 4px;
}

.question-content {
    margin-bottom: 12px;
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.question-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    transition: opacity 0.3s;
}

.question-item:hover .question-actions {
    opacity: 1;
}

.empty-form-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.property-panel {
    width: 300px;
    background-color: #fff;
    border-left: 1px solid #e4e7ed;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 16px;
    font-weight: 500;
    border-bottom: 1px solid #e4e7ed;
}

.panel-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.option-edit-item {
    margin-bottom: 8px;
}

.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}

/* 自定义Element Plus样式 */
:deep(.el-button--dashed) {
    border-style: dashed;
}

/* 矩阵题样式 */
.matrix-preview {
    width: 100%;
    overflow-x: auto;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.matrix-table th,
.matrix-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ebeef5;
}

.matrix-table th {
    background-color: #f5f7fa;
    font-weight: 500;
}

.matrix-table .row-title {
    text-align: left;
    font-weight: 500;
    background-color: #f5f7fa;
}

/* 响应式布局下的矩阵题 */
@media (max-width: 768px) {
    .matrix-table {
        min-width: 600px;
    }
}
</style>